<template>
  <div class="upload-container">
    <el-button v-if="showButton" :style="{background:color,borderColor:color}" icon="el-icon-chat-dot-square"  size="mini" type="primary" @click=" dialogVisible=true">
      代码
    </el-button>
    <el-dialog :visible="dialogVisible" width="75%" top="5vh" custom-class="code-dialog" @close="close">
      <CodeEditor ref="codeEditor"  />
      <div slot="title" class="dialog-title">
         在线代码编辑器
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getCode">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { getToken } from 'api/qiniu'
 import CodeEditor from '@/components/CodeEditor'

export default {
  name: 'CodeEditorDialog',
  components: { CodeEditor },
  props: {
    color: {
      type: String,
      default: '#1890ff'
    },
    codeDialogOpen: {
      type: Boolean,
      default: false
    }
  },
  watch: {
     codeDialogOpen(v) {
       this.dialogVisible=v
     }
  },
  data() {
    return {
      showButton:false,
      dialogVisible: false
    }
  },
  methods: {
    setCode(data) {
      var that=this;
      setTimeout(function(){
        that.$refs.codeEditor.init(data)
      },70)
    },
    getCode() {
      var prism=this.$refs.codeEditor.getPrism()
      var code=this.$refs.codeEditor.getValue()
      //var block=`<pre class="language-${prism}"><code>${code}</code></pre>`
      this.dialogVisible = false
      this.$emit('successCode', {code:code,language:prism,codeDialogOpen:this.dialogVisible})
    },
    close(){
      this.dialogVisible=false
      this.$refs.codeEditor.init()
      this.$emit('codeDialogClose', false)
    }
  }
}
</script>

<style lang="scss" scoped>
 .upload-container{
 /deep/  .el-dialog__header {
       padding-left:  10px;
 }
 /deep/  .el-dialog__body {
      padding: 2px 10px;
 }
 }
.editor-slide-upload {
  margin-bottom: 20px;
  /deep/ .el-upload--picture-card {
    width: 100%;
  }
}
</style>
